<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="queries.css" />
    <title>Bloomify Website</title>
  </head>
  <body>
    <header class="navbar">
      <div class="container nav-container">
        <a class="logo" href="#home">
          <img src="Bloomify Logo.svg" />
          <p>Bloomify</p>
        </a>
        <nav class="nav-links" id="nav-links">
          <a href="#home">Home</a>
          <a href="#why-bloomify">Why Bloomify?</a>
          <a href="#favourites">Customer Favourites</a>
          <a href="#how-it-works">How It Works</a>
          <a href="#download-app">Download App</a>
        </nav>
        <div class="hamburger" id="hamburger">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
    </header>
    <!-- Section : Hero-->
    <section class="hero-section" id="home">
      <div class="hero-content">
        <div class="hero-text reveal">
          <span class="label">🏆Award-Winning Flower Delivery Service</span>
          <h1>
            Fresh Blooms,<br />
            Delivered Instantly!💮
          </h1>
          <p>
            AI-powered recommendations, same-day delivery & custom
            bouquets—experience flower shopping redefined.
          </p>
          <a href="#"><i class="fa-solid fa-download"> Download App</i></a>
        </div>
        <div class="hero-image reveal">
          <img src="Mockup Image.png" alt="hero-img" />
        </div>
      </div>
    </section>
    <!-- Section: Why Bloomify-->
    <section class="why-bloomify" id="why-bloomify">
      <span class="label">Why Bloomify?</span>
      <h3>
        The Best Way to<br />
        Send Flowers, Period!
      </h3>
      <div class="why-bloomify-content">
        <div class="card reveal">
          <i class="fa-solid fa-crown"></i>
          <span>AI-Powered Recommendations</span>
          <p>
            Get personalized flower suggestions based on your preferences, past
            orders, and special occasions
          </p>
        </div>
        <div class="card reveal">
          <i class="fa-solid fa-truck-fast"></i>
          <span>Same-Day & Scheduled Delivery</span>
          <p>
            Whether it’s a last-minute gift or a planned surprise, we deliver
            fresh flowers exactly when you need them.
          </p>
        </div>
        <div class="card reveal">
          <i class="fa-solid fa-sliders"></i>
          <span>Build Your Own Custom Bouquet</span>
          <p>
            Whether it’s a last-minute gift or a planned surprise, we deliver
            fresh flowers exactly when you need them.
          </p>
        </div>
      </div>
    </section>
    <!-- Section: Customer Favourites-->
    <section class="customer-favourites" id="favourites">
      <div class="label-container">
        <span class="label">Customer Favourites</span>
      </div>
      <h3>
        Discover our best-selling<br />
        floral arrangements
      </h3>
      <div class="customer-favourites-content">
        <div class="product reveal">
          <img src="product-1.png" />
          <p class="rating">
            <i class="fa-solid fa-star"></i>
            4.2
          </p>
          <span>Blush Pink Lily Bunch</span>
          <p>&#8377; 1099</p>
        </div>
        <div class="product reveal">
          <img src="product-2.png" />
          <p class="rating"><i class="fa-solid fa-star"></i>4.7</p>
          <span>Whispering Carnation</span>
          <p>&#8377; 1249</p>
        </div>
        <div class="product reveal">
          <img src="product-3.png" />
          <p class="rating"><i class="fa-solid fa-star"></i>4.4</p>
          <span>White Rose Elegance</span>
          <p>&#8377; 1499</p>
        </div>
        <div class="product reveal">
          <img src="product-4.png" />
          <p class="rating"><i class="fa-solid fa-star"></i>4.5</p>
          <span>Classic Mixed Blooms</span>
          <p>&#8377; 649</p>
        </div>
      </div>
    </section>
    <!-- Section: How It Works-->
    <section class="how-it-works" id="how-it-works">
      <span class="label">HOW IT WORKS</span>
      <h3>
        Ordering Flowers Has<br />
        Never Been Easier!
      </h3>
      <div class="how-it-works-content">
        <div class="step reveal">
          <span>1</span>
          <h4>Browse & Choose</h4>
          <p>
            Explore handcrafted floral arrangements for every occasion. Want
            something unique? Customize your own bouquet
          </p>
        </div>
        <div class="step reveal">
          <span>2</span>
          <h4>Schedule Your Delivery</h4>
          <p>
            Need flowers fast? Choose Same-Day Delivery. Planning ahead?
            Schedule for later, and we’ll take care of the rest.
          </p>
        </div>
        <div class="step reveal">
          <span>3</span>
          <h4>Track & Enjoy</h4>
          <p>
            Once ordered, relax! Our real-time tracking system keeps you
            updated, from bouquet preparation to doorstep delivery
          </p>
        </div>
      </div>
    </section>
    <!-- Section: Testimonials-->
    <section class="testimonials">
      <span class="label">TESTIMONIALS</span>
      <h3>
        Hear From Our<br />
        Happy Customers
      </h3>
      <div class="testimonials-content">
        <div class="testimonial reveal">
          <i class="fa-solid fa-quote-left"></i>
          <p>
            Bloomify made gifting so easy! The flowers were fresh, beautifully
            arranged, and delivered on time.
          </p>
          <span>Priya Mehta</span>
        </div>

        <div class="testimonial reveal">
          <i class="fa-solid fa-quote-left"></i>
          <p>
            Absolutely love the AI-powered suggestions! Found the perfect
            bouquet in seconds.
          </p>
          <span>Arjun Sharma</span>
        </div>

        <div class="testimonial reveal">
          <i class="fa-solid fa-quote-left"></i>
          <p>
            On-time delivery and stunning flowers. The customization options
            were a game-changer!
          </p>
          <span>Neha Reddy</span>
        </div>

        <div class="testimonial reveal">
          <i class="fa-solid fa-quote-left"></i>
          <p>
            Excellent experience! The same-day delivery saved me when I needed a
            last-minute gift.
          </p>
          <span>Rahul Khanna</span>
        </div>

        <div class="testimonial reveal">
          <i class="fa-solid fa-quote-left"></i>
          <p>
            The quality of flowers was amazing! They stayed fresh for days, and
            the packaging was beautiful.
          </p>
          <span>Simran Kaur</span>
        </div>

        <div class="testimonial reveal">
          <i class="fa-solid fa-quote-left"></i>
          <p>
            Bloomify’s scheduled delivery was super convenient. The bouquet
            arrived on time for my anniversary!
          </p>
          <span>Vikram Iyer</span>
        </div>
      </div>
    </section>
    <section class="download-app" id="download-app">
      <div class="download-app-content">
        <div class="download-app-text reveal">
          <h3>
            Get Bloomify & Order<br />
            Flowers in Seconds!
          </h3>
          <p>
            Fast, fresh, and beautifully crafted—experience seamless flower
            delivery at your fingertips
          </p>
          <div class="btns">
            <a href="#">
              <img src="app store.png" />
            </a>
            <a href="#">
              <img src="google play.png" />
            </a>
          </div>
        </div>
        <div class="download-app-img reveal">
          <img src="Mockup Image.png" />
        </div>
      </div>
    </section>
    <footer>
      <div class="footer-content">
        <h3>Bloomify</h3>
        <ul class="footer-links">
          <li><a href="#home">Home</a></li>
          <li><a href="why-bloomify">Why Bloomify</a></li>
          <li><a href="favourites">Favourites</a></li>
          <li><a href="#how-it-works">How It Works?</a></li>
          <li><a href="download-app"></a>Download App</li>
        </ul>
        <div class="social-icons">
          <a href="#"><i class="fa-brands fa-instagram"></i></a>
          <a href="#"><i class="fa-brands fa-twitter"></i></a>
          <a href="#"><i class="fa-brands fa-facebook"></i></a>
        </div>
      </div>
      <p class="footer-copy">&copy; 2025 Bloomify. All rights reserved.</p>
    </footer>
    <script src="script.js"></script>
  </body>
</html>
